<template>
  <div
    class="releasePlat"
    id="releasePlat"
    :style="{ backgroundColor: bgColor }"
  >
    <div class="infodriver" v-if="platStatus == '占用'">
      <div class="infodriverBox">
        <div class="infodriverTitle">车牌:</div>
        <div class="infodriverTitle1">{{ carNumber }}</div>
      </div>
      <div class="infodriverBox">
        <div class="infodriverTitle">司机:</div>
        <div class="infodriverTitle1">{{ driverName }}</div>
      </div>
      <div class="infodriverBox">
        <div class="infodriverTitle">手机:</div>
        <div class="infodriverTitle1">{{ phone }}</div>
      </div>
      <div class="infodriverBox">
        <div class="infodriverTitle">排队:</div>
        <div class="infodriverTitle1">{{ softNum }}</div>
      </div>
      <div class="infodriverBox addBtn">
        <div class="infodriverTitle">件数:</div>
        <div class="infodriverTitle1">
          <el-input placeholder="请输入内容" v-model="sendCount" clearable>
          </el-input>
        </div>
        <div>
          <el-button
            type="primary"
            icon="el-icon-edit"
            @click="handlesentCount"
            round
            >修改</el-button
          >
        </div>
      </div>
    </div>
    <div class="releaseBtn" @click="release()">
      <div class="status">{{ platStatus }}</div>
    </div>
    <el-switch
      style="display: block,width:60px"
      v-model="enablestatus"
      active-color="#12e26e"
      inactive-color="#ff4949"
      active-value="0"
      inactive-value="1"
      @change="handlestatus"
    >
    </el-switch>
    <div class="btn">
      <el-button
        v-if="platStatus == '占用'"
        type="primary"
        round
        class="callout"
        icon="el-icon-microphone
"
        @click="handleCallout"
        >呼叫</el-button
      >
      <!-- <div class="callout" @click="handleCallout">呼叫</div> -->
      <!-- <div class="refresh" @click="handlerefresh">刷新</div> -->
      <el-button type="primary" round class="callout" @click="handlerefresh"
        >刷新</el-button
      >
    </div>
  </div>
</template>

<script>
import { InfoById, editSendCount } from "@/api/system/reservation";
import { Dialog } from "vant";
import { clearYtPlatform, hjDriverInfo } from "@/api/system/platform";
export default {
  data() {
    return {
      platStatus: "",
      enablestatus: "",
      driverName: "",
      carNumber: "",
      phone: "",
      sendCount: "",
      infoId: "",
      softNum: "",
      platId: null,
      bgColor: "",
    };
  },
  created() {
    // 获取URL中的参数值
    function getParameterByName(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return "";
      return decodeURIComponent(results[2].replace(/\+/g, " "));
    }
    let url = window.location.href;
    this.platId = getParameterByName("id", url);
    console.log(111, this.platId);
    this.getInfoById();
  },

  methods: {
    handlerefresh() {
      window.location.reload();
    },
    getInfoById() {
      InfoById({ id: this.platId }).then((res) => {
        this.platStatus = res.data.workStatus == "0" ? "空闲" : "占用";
        this.enablestatus = res.data.enableStatus;
        this.driverName = res.data.driverName;
        this.carNumber = res.data.carNumber;
        this.phone = res.data.phone;
        this.softNum = res.data.softNum;
        this.sendCount = res.data.sendCount;
        this.infoId = res.data.id;
        if (this.enablestatus == "0") {
          this.bgColor = "#39fa46";
        } else {
          this.bgColor = "#ff6666";
        }
      });
    },
    // 呼叫
    handleCallout() {
      hjDriverInfo({ id: this.infoId }).then((res) => {
        console.log(res);
      });
    },
    // 修改件数
    handlesentCount() {
      editSendCount({ id: this.infoId, sendCount: this.sendCount }).then(
        (res) => {
          this.getInfoById();
        }
      );
    },
    release() {
      // clearYtPlatform({ id: this.platId, workStatus: "0" }).then((res) => {
      //   // this.platStatus = res.msg;
      //   location.reload();
      // });
      Dialog.confirm({
        title: "释放月台确认",
        message: `即将给您安排下一辆车前，请确认${this.carNumber}是否收货完成？`,
      })
        .then(() => {
          clearYtPlatform({ id: this.platId, workStatus: "0" }).then((res) => {
            location.reload();
          });
        })
        .catch(() => {
          Dialog.close();
        });
    },
    handlestatus() {
      console.log(123, this.enablestatus);
      clearYtPlatform({
        id: this.platId,
        enableStatus: this.enablestatus,
      }).then((res) => {
        // location.reload();
      });
      if (this.enablestatus == "0") {
        this.bgColor = "#39fa46";
      } else {
        this.bgColor = "#ff6666";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.releasePlat {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .refresh {
    width: 80px;
    height: 40px;
    background: #1890ff;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
    margin-top: 30px;
    color: #fff;
  }
  .callout {
    width: 90px;
    height: 40px;
  }
  .infodriver {
    width: 80%;
    height: 130px;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-top: -8px;
  }
  .addBtn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .infodriverBox {
    height: 30px;
    display: flex;
    justify-content: flex-start;
    .infodriverTitle {
      width: 20%;
    }
    .infodriverTitle1 {
      width: 60%;
    }
  }
  .releaseBtn {
    background-image: url(../assets/images/releaseBtn.png);
    background-size: 100% 100%;
    width: 360px;
    height: 360px;
    display: flex;
    color: rgb(250, 118, 118);
    font-size: 22px;
    font-weight: 700;
    justify-content: center;
    align-items: center;
    margin-top: 8px;
    .status {
      margin-top: -14px;
    }
  }
  .btn {
    margin-top: 30px;
    display: flex;
    justify-content: space-around;
    width: 200px;
    align-items: center;
  }
  ::v-deep .el-switch__core {
    width: 80px !important;
    height: 30px !important;
    border-radius: 15px;
  }
  ::v-deep .el-switch {
    margin-top: 20px;
  }
  ::v-deep .el-switch__core:after {
    top: 6px;
  }
  ::v-deep .el-input__inner {
    background: #ffffffc2;
  }
  ::v-deep .el-icon-microphone:before {
    content: "";
    font-size: 16px;
  }
}
</style>